<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />

    <!-- Splash Screen/Loader Styles - these styles were inlined so the loading animation appears instantly -->
    <style>
body {
  margin: 0;
}

#loading-bg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}
.loading-logo {
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 125px);
}
.loading-logo img {
  width: 100px;
}
.loading {
  position: absolute;
  left: calc(50% - 35px);
  top: calc(50% + 15px);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid transparent;
}
.loading .effect-1,
.loading .effect-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-left: 3px solid #36c9a5;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.loading .effect-1 {
  animation: rotate 1s ease infinite;
}
.loading .effect-2 {
  animation: rotateOpacity 1s ease infinite 0.1s;
}
.loading .effect-3 {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-left: 3px solid #36c9a5;
  -webkit-animation: rotateOpacity 1s ease infinite 0.2s;
  animation: rotateOpacity 1s ease infinite 0.2s;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.loading .effects {
  transition: all 0.3s ease;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
@keyframes rotateOpacity {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 0.1;
  }
  100% {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
    opacity: 1;
  }
}

    </style>

    <link rel="icon" href="<%= BASE_URL %>logo.png" type="image/x-icon">

    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"
      rel="stylesheet"
    />
    <title>FluxOS Dashboard</title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but the FluxOS Dashboard doesn't work properly without JavaScript enabled. Please
        enable it to continue.</strong
      >
    </noscript>
    <div id="loading-bg">
      <div class="loading-logo">
        <img src="<%= BASE_URL %>logo.png" alt="Logo" />
      </div>
      <div class="loading">
        <div class="effect-1 effects"></div>
        <div class="effect-2 effects"></div>
        <div class="effect-3 effects"></div>
      </div>
    </div>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script type="text/javascript">
    var skin = localStorage.getItem('vuexy-skin') || 'dark';
    if (skin === 'dark') {
      document.body.classList.add('dark-layout')
    } else if (document.body.className.match('dark-layout')) {
      document.body.classList.remove('dark-layout');
    }
  </script>
</html>
